<template>
	<view>
		<u-tabbar activeColor="#dd2131" :border="false" :value="value" @change="tabBarChange" :fixed="true"
			:placeholder="true" :safeAreaInsetBottom="true" inactiveColor='#999'>
			<u-tabbar-item text="主页" >
				<image  slot="active-icon" style="width: 48rpx;height: 48rpx;"
					src="/static/images/tabBar/home.png"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" style="width: 48rpx;height: 48rpx;"
					src="/static/images/tabBar/home1.png"></image>
			</u-tabbar-item> 
			<u-tabbar-item text="分类" >
				<image  slot="active-icon" style="width: 48rpx;height: 48rpx;"
					src="/static/images/tabBar/categroy.png"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" style="width: 48rpx;height: 48rpx;"
					src="/static/images/tabBar/categroy1.png"></image>
			</u-tabbar-item>
			<u-tabbar-item text="购物车" >
				<image  slot="active-icon"  
					src="/static/images/tabBar/cart.png" style="width: 48rpx;height: 48rpx;"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" style="width: 48rpx;height: 48rpx;"
					src="/static/images/tabBar/cart1.png"></image>
			</u-tabbar-item>
			<u-tabbar-item text="我的" >
				<image  slot="active-icon" style="width: 48rpx;height: 48rpx;"
					src="/static/images/tabBar/mine.png"></image> 
				<image class="u-page__item__slot-icon" slot="inactive-icon" style="width: 48rpx;height: 48rpx;"
					src="/static/images/tabBar/mine1.png"></image> 
			</u-tabbar-item>
		</u-tabbar>
	</view> 
</template>
<script>
	export default{
		props:{
			value:{
				default:0 
			}
		},
		methods:{
			tabBarChange(name){
				// this.value= name 
				this.$emit('changeValue',name) 
				let url ; 
				if(name==0){ 
					url='/pages/index/index'
				}else if(name==1){
					url='/pages/classification/classification'
				}else if(name==2){
					url='/pages/cart/cart'
				}else{
					url='/pages/my/my' 
				}  
				uni.navigateTo({ 
					url
				}) 
			}
		}
	}
</script> 

<style lang="scss" scoped>
	/deep/.u-tabbar__content{
		  position: fixed;
		  width: 100% !important;
		  height: 112rpx;
		  left:0% !important;
		  bottom: 0rpx !important;
		  background-color: #fff;
		  box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(6,6,6,0.06) !important;
		  image{
			  width: 48rpx;
			  height: 48rpx;
		  }
	}
	// /deep/.u-tabbar__content{
	// 	  position: fixed;
	// 	  width: 86% !important;
	// 	  height: 112rpx;
	// 	  left: 7% !important;
	// 	  bottom: 48rpx !important;
	// 	  background-color: #fff;
	// 	  box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(6,6,6,0.06) !important;
	// 	  border-radius:56rpx !important;
	// 	  image{
	// 		  width: 48rpx;
	// 		  height: 48rpx;
	// 	  }
	// }
</style>